<template>
    <view class="page flex-col">
        <view class="block_2 flex-col">
            <text class="text_3">向TA发送一条打招呼</text>
            <view class="chat-list">
                <view v-for="(item, index) in chatList" :key="index" class="text-wrapper_1 flex-col"
                    :class="{ 'active-chat': id === item.id }" @click="handleSelectChatItem(item)">
                    <text class="text_4">
                        {{ item.text }}
                    </text>
                </view>
            </view>

            <view class="box_3 flex-row justify-between">
                <view class="text-wrapper_6 flex-col">
                    <text class="text_9" @click="handleBack">再等等</text>
                </view>
                <view class="text-wrapper_7 flex-col">
                    <text class="text_10" @click="handleSend">发送</text>
                </view>
            </view>
            <image class="image_3" referrerpolicy="no-referrer"
                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng148788ae1e5208316afacc4a788ab95022a9c09dc91ac36cee67e4cd2a7b4a5e" />
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            id: null,
            constants: {},
            chatList: [
                {
                    id: 1,
                    text: '刷到你的动态，发现我们想找的搭子类型挺像的，想问问你对活动强度有什么偏好吗？'
                },
                {
                    id: 2,
                    text: '看到你想找搭子，我对这方面也挺感兴趣的，想确认下你更看重搭子的什么特质呢？'
                },
                {
                    id: 3,
                    text: '看到你在找搭子，我也在找，想确认下你平时是喜欢提前规划还是即兴安排活动呢？'
                },
                {
                    id: 4,
                    text: '注意到你在找搭子，我这边时间比较灵活，想了解下你一般习惯在哪个区域活动呢？'
                },
                {
                    id: 5,
                    text: '刷到你找搭子的动态，感觉我们可能合得来，想了解下你对活动有什么要求吗？'
                },
            ]
        };
    },
    methods: {
        handleSelectChatItem(item) {
            this.id = item.id;
        },
        handleSend() {
            uni.navigateTo({
                url: '/subpage/meethuangshi/chat?id=' + this.id
            });
        },
        handleBack() {
            uni.navigateBack();
        },
    },
};
</script>
<style lang="scss" scoped>
@import '../../static/style/common.css';

.page {
    background-color: rgba(247, 246, 255, 1);
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 534px;
    padding-left: 0;
    padding-right: 0;

    .block_2 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng48009303e05c2d34110631bd6c9d8422d4be9c11df4c1c29edeb848662243d9e) 100% no-repeat;
        background-size: 100% 100%;
        padding: 19px 16px 28px 16px;

        .text_3 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 18px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 25px;
            margin: 0 132px 0 58px;
        }

        .text-wrapper_1 {
            background-color: rgba(247, 247, 247, 1);
            border-radius: 20px 20px 0px 20px;
            margin-top: 12px;
            padding: 10px 16px 10px 16px;
            border: 1px solid transparent;

            &.active-chat {
                border: 1px solid rgba(123, 67, 194, 1);
            }

            .text_4 {
                width: 326px;
                height: 44px;
                overflow-wrap: break-word;
                color: rgba(52, 49, 79, 1);
                font-size: 16px;
                font-weight: normal;
                text-align: left;
                line-height: 22px;
            }
        }

        .box_3 {
            width: 358px;
            margin-top: 28px;

            .text-wrapper_6 {
                background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng49e1fad62e07074e088524ffd860fef26e17845ac3ab950bb177f1f365289390) 100% no-repeat;
                background-size: 100% 100%;
                padding: 13px 43px 13px 43px;

                .text_9 {
                    overflow-wrap: break-word;
                    color: rgba(52, 49, 79, 1);
                    font-size: 16px;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    text-align: right;
                    white-space: nowrap;
                    line-height: 22px;
                }
            }

            .text-wrapper_7 {
                background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng176b07802458a086e9b5bf7cb4d98343e41128640f7eeba1b61267ecc203711a) 100% no-repeat;
                background-size: 100% 100%;
                padding: 13px 89px 13px 89px;

                .text_10 {
                    overflow-wrap: break-word;
                    color: rgba(255, 255, 255, 1);
                    font-size: 16px;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    text-align: right;
                    white-space: nowrap;
                    line-height: 22px;
                }
            }
        }

        .image_3 {
            position: absolute;
            left: 15px;
            top: -9px;
            width: 50px;
            height: 50px;
        }
    }
}
</style>